<template>
    <div class="content">
        <h1 id="编辑器配置">
          编辑器配置</h1>
        <h2 id="vscode-设置">
            VSCode 设置</h2>
        <h3 id="公共设置">
            公共设置</h3>
        <p>项目公共的设置会提交到
            <code>.vscode/settings.json</code>文件中</p>
        <h3 id="代码格式化设置">
            代码格式化设置</h3>
        <div class="tip custom-block">
            <p class="custom-block-title">TIP</p>
            <p>开发者需要手动在 VSCode 的
                <strong>用户设置</strong>下增加如下的设置</p>
        </div>
        <pre class="language-bash"><code><span class="token string">"vetur.format.defaultFormatter.html"</span><span class="token keyword">:</span> <span class="token string">"js-beautify-html"</span>
</code><code><span class="token string">"emmet.triggerExpansionOnTab"</span><span class="token keyword">:</span> <span class="token string">true</span>
</code><code><span class="token string">"editor.tabSize"</span><span class="token keyword">:</span> <span class="token string">2</span>
</code><code><span class="token string">"emmet.excludeLanguages"</span><span class="token keyword">:</span> <span class="token string">[
        "vue-html",
        "vue"
    ]</span>
</code></pre>
        <p>代码格式的设置文件存放于每个项目的根目录下
            <code>.prettierrc</code>
        </p>
        <pre class="language-bash"><code><span class="token punctuation">{</span>
  //使用单引号
  <span class="token string">"singleQuote"</span><span class="token keyword">:</span> true,
  //句尾加分号
  <span class="token string">"semi"</span><span class="token keyword">:</span> true,
  //所有类型的文件，都使用prettier格式化
  <span class="token string">"disableLanguages"</span><span class="token keyword">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>,
  //大括号内部加空格
  <span class="token string">"bracketSpacing"</span><span class="token keyword">:</span> true,
  //换行的宽度
  <span class="token string">"printWidth"</span><span class="token keyword">:</span> 300
<span class="token punctuation">}</span>
</code></pre>
        <p>代码格式化，使用组合键
            <code>alt + shift + F</code>
        </p>
        <h2 id="vscode-插件">
          VSCode 插件</h2>
        <h3 id="开发必备插件">
          开发必备插件</h3>
        <ul>
            <li>
                <strong>Git History</strong>
            </li>
        </ul>
        <p>查看 Git 提交日志</p>
        <ul>
            <li>
                <strong>vetur</strong>
            </li>
        </ul>
        <p>Vue 语法高亮、智能感知</p>
        <ul>
            <li>
                <strong>Sass</strong>
            </li>
        </ul>
        <p>写 sass 必备</p>
        <ul>
            <li>
                <strong>sftp</strong>
            </li>
        </ul>
        <p>文件上传，默认的 sftp 的配置存放在项目的
            <code>.vscode/sftp.json</code> 文件中</p>
        <ul>
            <li>
                <strong>ESLint</strong>
            </li>
        </ul>
        <p>EsLint 可以帮助我们检查 Javascript 编程时的语法错误。比如：在 Javascript 应用中，你很难找到你漏泄的变量或者方法。EsLint 能够帮助我们分析 JS 代码，找到 bug 并确保一定程度的 JS 语法书写的正确性。</p>
        <ul>
            <li>
                <strong>Prettier</strong>
            </li>
        </ul>
        <p>格式化 JavaScript/TypeScript/CSS</p>
        <ul>
            <li>
                <strong>Add jsdoc comments</strong>
            </li>
        </ul>
        <p>JS 接口文档生成工具</p>
        <h3 id="其他常用插件">
            其他常用插件</h3>
        <ul>
            <li>
                <strong>Auto Close Tag</strong>
            </li>
        </ul>
        <p>自动添加 HTML / XML 关闭标签（必备）</p>
        <ul>
            <li>
                <strong>Auto Rename Tag</strong>
            </li>
        </ul>
        <p>自动重命名配对的 HTML / XML 标签(必备)</p>
        <ul>
            <li>
                <strong>Class autocomplete for HTML</strong>
            </li>
        </ul>
        <p>智能提示 HTML class =“”属性（必备）</p>
        <ul>
            <li>
                <strong>HTML CSS Support</strong>
            </li>
        </ul>
        <p>在 html 标签上写 class 智能提示当前项目所支持的样式（必备）</p>
  

  
        <ul>
            <li>
                <strong>JavaScript (ES6) code snippets</strong>
            </li>
        </ul>
        <p>es6 代码片段（必备）</p>
 
  
    </div>
</template>
